
<%if (css === 'less') {-%>
  @distance: 30;
  .distance(@i) when (@i > 0) {
    .pl-@{i} {
      padding-left: @i * 1px;
    }
  
    .pr-@{i} {
      padding-right: @i * 1px;
    }
  
    .pt-@{i} {
      padding-top: @i * 1px;
    }
  
    .pb-@{i} {
      padding-bottom: @i * 1px;
    }
  
    .ml-@{i} {
      margin-left: @i * 1px;
    }
  
    .mr-@{i} {
      margin-right: @i * 1px;
    }
  
    .mt-@{i} {
      margin-top: @i * 1px;
    }
  
    .mb-@{i} {
      margin-bottom: @i * 1px;
    }
  
    .distance(@i - 2);
  }
  
  .distance(@distance);
<%} else if (css === 'scss') { -%>
  $distance: 30;
  @for $value from 0 through $distance {
    @if $value % 5 == 0 {
      .m-#{$value} {
        margin: $value * 1px;
      }
      .p-#{$value} {
        padding: $value * 1px;
      }
    }
    @if $value % 2 == 0 and $value >= 10 {
      .pl-#{$value} {
        padding-left: $value * 1px;
      }
    
      .pr-#{$value} {
        padding-right: $value * 1px;
      }
    
      .pt-#{$value} {
        padding-top: $value * 1px;
      }
    
      .pb-#{$value} {
        padding-bottom: $value * 1px;
      }
    
      .ml-#{$value} {
        margin-left: $value * 1px;
      }
    
      .mr-#{$value} {
        margin-right: $value * 1px;
      }
    
      .mt-#{$value} {
        margin-top: $value * 1px;
      }
    
      .mb-#{$value} {
        margin-bottom: $value * 1px;
      }
    }
  }
<%}-%>